<template>
	<view class="easy_center_y text-sm mb-[120rpx]">
		<view class="bg-[#fff] w-[96%] rounded-md pr-4 mt-2">
			<!-- 油 -->
			<view class="easy_start">
				<image class="w-[30vw] h-[30vw]" src="../../assets/oil.svg" />
				<view class="w-[70%]">
					<view
						v-for="(item, index) in initData.oilLists"
						:key="index"
					>
						<view class="easy_between">
							<text class="mb-1 ellipsis w-[30%]">{{
								item.name
							}}</text>
							<text class="mr-6 mb-1">{{ item.weight }}g</text
							><text class="mr-6"
								>{{ item.proportion }}%</text
							></view
						>
					</view></view
				>
			</view>
		</view>
		<view class="easy_between w-[96%] mt-2">
			<!-- 水 -->
			<view class="bg-[#fff] flex-1 mr-2 rounded-md pr-4">
				<view class="easy_start">
					<view class="w-[30vw] h-[30vw] relative">
						<image
							class="w-[30vw] h-[30vw]"
							src="../../assets/water.svg"
						/>
						<view
							class="text-[#fff] text-sm absolute top-3 left-0 bottom-0 right-2 flex items-center justify-center"
							>水</view
						>
					</view>
					<text class="text-sm">{{ initData.waterWeight }}g</text>
				</view>
			</view>
			<!-- 碱 -->
			<view class="bg-[#fff] flex-1 rounded-md pr-4">
				<view class="easy_start"
					><view class="w-[30vw] h-[30vw] relative">
						<image
							class="w-[30vw] h-[30vw]"
							src="../../assets/NaOH.svg"
						/>
						<view
							class="text-[#fff] text-sm absolute top-8 left-3 bottom-0 right-2 flex items-center justify-center"
							>碱</view
						>
					</view>
					<text class="text-sm"
						>{{ initData.NaOHWeight }}g</text
					></view
				>
			</view>
		</view>
		<!-- 其他添加物 -->
		<view
			class="bg-[#fff] w-[96%] mt-2 rounded-md pr-4 pt-3 pb-3"
			v-if="initData.otherLists?.length > 0"
			><view class="easy_start">
				<image
					class="w-[28vw] h-[28vw]"
					src="../../assets/essentialOil.svg"
				/>
				<view class="w-[48%]">
					<view
						v-for="(item, index) in initData.otherLists"
						:key="index"
					>
						<view class="easy_between">
							<text class="mr-6 mb-1">{{ item.name }}</text>
							<text class="mr-6">{{ item.weight }} </text></view
						>
					</view></view
				>
			</view></view
		>
		<!-- 计算结果 -->
		<!-- <view class="bg-[#fff] w-[96%] rounded-md mt-2 p-4">
				<view class="table">
					<view class="tr">
						<view class="th">名称</view>
						<view class="th">重量(g)</view>
					</view>
					<view v-for="(v, index) in computedData" :key="index">
						<view class="tr">
							<view class="td">{{ v.name }}</view>
							<view class="td">{{ v.weight }}</view>
						</view>
					</view>
				</view>
			</view> -->
		<!-- 功效 -->
		<view
			v-if="initData.function"
			class="bg-[#fff] w-[96%] rounded-md mt-2 overflow-hidden info-box"
		>
			<view class="section-header">
				<text class="section-title">{{ initData.name }}</text>
			</view>
			<view class="info-section border-b">
				<view class="info-label">功效：</view>
				<view class="info-content">{{ initData.function }}</view>
			</view>
			<view v-if="initData.remark" class="info-section">
				<view class="info-label">备注：</view>
				<view class="info-content">{{ initData.remark }}</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import Taro, { eventCenter, getCurrentInstance, useLoad } from '@tarojs/taro';
import { ref, computed } from 'vue';

const initData = ref({
	oilLists: [] as any[],
	otherLists: [] as any[],
	function: '',
	name: '',
	remark: '',
	waterWeight: 0,
	NaOHWeight: 0,
});
const computedData = ref([] as any[]);

useLoad(() => {
	const router = getCurrentInstance().router;
	if (router && router.params && router.params.obj) {
		initData.value = JSON.parse(decodeURIComponent(router.params.obj));
		console.log(initData.value, 'initData');
	}
	// const { totalOilWeight, otherWeight, totalWeight } = initData.value;
	// console.log(totalWeight, 'totalWeight');

	// computedData.value = [
	// 	{ name: '油相总重', weight: totalOilWeight },
	// 	{ name: '超脂/添加物', weight: '详见上图' },
	// 	{ name: '入模总重', weight: totalWeight },
	// ];
});
</script>
<style>
.table {
	display: flex;
	flex-direction: column; /* 排列形式: 向下 */
}

.tr {
	display: flex;
	flex-direction: row;
}

.th,
.td {
	/* 公有的属性 */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap; /* 自动换行 */
	width: 50%;
	text-align: center; /* 文本居中 */
	justify-content: center; /* 主轴居中 */
	align-items: center; /* 交叉轴居中 */
	border-top: 1px solid #dadada; /* 单元格上线框 */
	border-bottom: 1px solid #dadada; /* 单元格下线框 */
	border-left: 1px solid #dadada; /* 单元格左线框 */
	border-right: 1px solid #dadada; /* 单元格右线框 */
	height: 60px;
}

.th {
	font-weight: 800; /* 字体加重 */
	background-color: #a8abe5; /* 背景色 */
	height: 60px;
}

.td {
	background-color: #fff; /* 背景色 */
}

.info-box {
	border: 1px solid #eee;
}

.info-section {
	padding: 24rpx 30rpx;
}

.info-label {
	font-size: 26rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 12rpx;
}

.info-content {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
}

.border-b {
	border-bottom: 1px solid #eee;
}

.section-header {
	background-color: #a8abe5;
	padding: 24rpx 30rpx;
	display: flex;
	align-items: center;
}

.section-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
}
</style>
